<script setup>
	import { ref } from 'vue'
	import { preOrderApi, createOrderApi } from '@/services/consult.js'
	import { patientDetailApi } from '@/services/patient.js'
	import { paymentApi } from '@/services/payment.js'
	import { useConsultStore } from '@/stores/consult'
	const { type, illnessType, patientId, consultValue, depId } =
		useConsultStore()
	// 预付订单信息
	const preOrderInfo = ref({})
	// 订单ID
	const orderId = ref('')
	const patient = ref({})
	// custom-payment组件ref
	const payment = ref()
	async function createPreOrder() {	
		const { code, data, message } = await preOrderApi({
			type,
			illnessType
		})
		if (code !== 10000) return uni.utils.toast(message)
		preOrderInfo.value = data
	}
	async function getPatientDetail() {
		const { code, data, message } = await patientDetailApi(patientId)
		if (code !== 10000) return uni.utils.toast(message)
		patient.value = data
	}
	async function onPayment() {
		if (orderId.value !== '') return uni.utils.toast('订单不能重复创建!')

		// 处理上传的图片，要求包含 ID 和 url （接口规订的）
		// 订单只能提交一次！！！
		let consultInfo = { ...consultValue }
		consultInfo.pictures = consultInfo.pictures.map(({ url, uuid }) => {
			return { url, id: uuid }
		})
		const { code, data, message } = await createOrderApi({
			type,
			illnessType,
			depId,
			patientId,
			...consultInfo,
		})
		if (code !== 10000) return uni.utils.toast(message)
		// 获取订单id
		orderId.value = data.id

		const consultStore = useConsultStore()
		// 生成订单，清空数据
		// consultStore.type = ''
		// consultStore.illnessType = ''
		// consultStore.depId = ''
		// consultStore.patientId = ''
		// consultStore.consultValue = consultStore.initalValue
		// 选择支付渠道
		payment.value.showPayment()
	}

	function close() {
		payment.value.hidePayment()
	}
	async function confirm(index) {
		if (index === 0) return uni.utils.toast('暂不支持微信支付!')
		const { code, data, message } = await paymentApi({
			paymentMethod: index,
			orderId: orderId.value,
			payCallback: 'http://localhost/subpkg_consult/room/index',
		})

		// 接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)

		// #ifdef H5
		window.location.href = data.payUrl
		// #endif

		// #ifdef MP-WEIXIN
		wx.requestPayment({
			//4个参数
		})
		// #endif

	}
	createPreOrder()
	getPatientDetail()
</script>
<template>
	<scroll-page>
		<view class="payment-page">
			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				:title="`图文问诊 ${preOrderInfo.payment}元`"
			>
				<uni-list :border="false">
					<uni-list-item
						title="极速问诊"
						note="自动分配医生"
						thumb="/static/uploads/doctor-avatar.jpg"
						thumb-size="lg"
					>
					</uni-list-item>
					<uni-list-item
						title="优惠劵"
						show-arrow
						:rightText="`-¥${preOrderInfo.couponDeduction}`"
					>
					</uni-list-item>
					<uni-list-item title="积分抵扣">
						<template #footer>
							<view class="text-red">
								-¥{{ preOrderInfo.pointDeduction }}
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="实付款">
						<template #footer>
							<view class="text-red"> ¥{{ preOrderInfo.actualPayment }}</view>
						</template></uni-list-item
					></uni-list
				>
			</uni-section>

			<view class="blank"> </view>
			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				title="患者资料"
			>
				<uni-list :border="false">
					<uni-list-item title="患者信息" :border="false">
						<template #footer>
							<view class="uni-list-text-gray">
								{{ patient.name }} | {{ patient.genderValue }} |
								{{ patient.age }}岁
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="病情描述" :note="consultValue.illnessDesc">
					</uni-list-item>
				</uni-list>
			</uni-section>
			<view class="total">
				<text class="total-amount"
					>合计：<text class="number"
						>¥{{ preOrderInfo.actualPayment }}</text
					></text
				>
				<button class="uni-button" @click="onPayment">立即支付</button>
			</view>
		</view>
	</scroll-page>
	<custom-payment
		ref="payment"
		@close="close"
		@confirm="confirm"
		:orderId="orderId"
		:amount="preOrderInfo.actualPayment"
	>
	</custom-payment>
</template>

<style lang="scss">
	.payment-page {
		.text-red {
			color: red;
		}
		.blank {
			width: 100vw;
			height: 40rpx;
			background-color: #f6f6f6;
		}
		.uni-list-text-gray {
			color: #848484;
			font-size: 30rpx;
		}
		.total {
			position: fixed;
			bottom: 30rpx;
			left: 0;
			right: 0;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			.total-amount {
				width: 200rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #3c3e42;
				.number {
					font-size: 42rpx;
					color: red;
				}
			}
			.uni-button {
				flex: 1;
			}
		}
	}

	:deep(.uni-section-header) {
		font-weight: 500 !important;
		padding-left: 30rpx !important;
		padding-bottom: 0 !important;
	}
	:deep(.uni-section-content) {
		padding-top: 0rpx !important;
		padding-bottom: 0rpx !important;
	}
	:deep(.uni-list-item__container) {
		padding: 0rpx !important;
	}
	:deep(.uni-list-item) {
		padding: 30rpx 0 !important;
	}
	:deep(.uni-list-item__icon) {
		margin-right: 0 !important;
	}
	:deep(.uni-list-item__content-title) {
		font-size: 32rpx !important;
		color: #3c3e42 !important;
	}
	:deep(.uni-list-item__extra-text) {
		font-size: 32rpx !important;
		color: #3c3e42 !important;
	}
	:deep(.uni-icon-wrapper) {
		padding: 0 !important;
	}
</style>
